const { Button, Input, Select, Radio, Form, message, Space } = antd;
const { useState, useEffect } = React;

/**
 * CompCreater - 组件创建器
 * 基于Ant Design的React组件，用于创建和管理组件模板
 * @returns {JSX.Element} React组件
 */
export default function CompCreater() {
  const [form] = Form.useForm();
  const [compmetarow, setCompmetarow] = useState(null);
  const [compmetaOptions, setCompmetaOptions] = useState([]);

  /**
   * 打开URL链接
   * @param {string} url - 要打开的URL
   */
  const openUrl = (url) => {
    window.open(url, '_blank');
  };

  /**
   * 测试功能 - 复制模板到剪贴板
   */
  const handleTest = () => {
    const prompt = `a
    b
        c
d`;
    try {
      $.copyToClipboard(prompt);
      message.success('模板已复制到剪贴板');
    } catch (error) {
      message.error('复制失败');
    }
  };

  /**
   * 新建组件 - 重置表单
   */
  const handleNewComponent = () => {
    form.resetFields();
    message.success('表单已重置');
  };

  /**
   * 创建组件 - 保存表单数据到数据库
   */
  const handleCreateComponent = async () => {
    try {
      const formData = form.getFieldsValue();
      
      // 组装提示词
      $.promptCombine($.prompt_gen_comp, formData);
      
      // 查询现有数据
      let existingRecord = null;
      if (formData.compname) {
        existingRecord = await $.db.compmeta.where('name').equals(formData.compname).first();
      }
      
      // 保存到数据库
      const dataToSave = {
        name: formData.compname,
        formdata: formData
      };
      
      if (existingRecord) {
        await $.db.compmeta.update(existingRecord.id, dataToSave);
        message.success('组件数据已更新');
      } else {
        await $.db.compmeta.add(dataToSave);
        message.success('组件数据已保存');
      }
      
      // 刷新选项列表
      loadCompmetaOptions();
      
    } catch (error) {
      message.error('保存失败: ' + error.message);
    }
  };

  /**
   * 加载组件模板选项
   */
  const loadCompmetaOptions = async () => {
    try {
      const allData = await $.db.compmeta.toArray();
      const options = allData.map(item => ({
        value: item.name,
        label: item.name
      }));
      setCompmetaOptions(options);
    } catch (error) {
      console.error('加载组件模板失败:', error);
    }
  };

  /**
   * 初始化组件
   */
  const initComponent = async () => {
    try {
      message.success('init ok');
      
      // 加载默认数据
      const defaultRecord = await $.db.compmeta.where('name').equals('TestComp').first();
      if (defaultRecord) {
        setCompmetarow(defaultRecord);
        form.setFieldsValue(defaultRecord.formdata);
      }
      
      // 加载选项
      loadCompmetaOptions();
      
    } catch (error) {
      console.error('初始化失败:', error);
    }
  };

  // 组件挂载时初始化
  useEffect(() => {
    initComponent();
  }, []);

  return (
    <div style={{ padding: '16px' }}>
      {/* 顶部按钮组 */}
      <Space size="small" style={{ marginBottom: 16 }}>
        <Button onClick={() => openUrl('https://v0zjsnf7n6w.feishu.cn/docx/VlxWd0MnQodsVsxccNYcBceJnOf')}>
          编辑
        </Button>
        <Button onClick={() => openUrl('https://v0zjsnf7n6w.feishu.cn/docx/WeazdPrW3oGIBFxhu7icPIKsnzd')}>
          编辑-组件创建器
        </Button>
        <Button onClick={() => openUrl('https://www.kimi.com/')}>
          kimi
        </Button>
        <Button onClick={() => openUrl('https://chat.deepseek.com/')}>
          deepseek
        </Button>
        <Button onClick={() => openUrl('https://chat.qwen.ai/')}>
          qianwen
        </Button>
        <Button onClick={() => openUrl('https://doubao.com/')}>
          豆包
        </Button>
        <Button onClick={() => openUrl('https://www.coze.cn/')}>
          coze
        </Button>
        <Button onClick={handleTest}>
          test
        </Button>
        <Button onClick={handleNewComponent}>
          新建组件
        </Button>
        <Button onClick={handleCreateComponent} type="primary">
          创建组件
        </Button>
      </Space>

      {/* 组件模板选择框 */}
      <Select
        options={compmetaOptions}
        placeholder="选择组件模板"
        style={{ width: 200, marginBottom: 16 }}
        onChange={async (value) => {
          const record = await $.db.compmeta.where('name').equals(value).first();
          if (record) {
            form.setFieldsValue(record.formdata);
          }
        }}
      />

      {/* 表单区域 */}
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          compname: 'TestComp',
          fields: [{
            formtype: 'input',
            buttontype: 'prompt',
            name: '',
            label: '',
            prompt: ''
          }]
        }}
      >
        <Form.Item name="compname" label="组件名称">
          <Input placeholder="请输入组件名称" />
        </Form.Item>

        <Form.List name="fields">
          {(fields, { add, remove }) => (
            <>
              {fields.map((field, index) => (
                <div key={field.key} style={{ 
                  border: '1px solid #d9d9d9', 
                  padding: '16px', 
                  marginBottom: '16px', 
                  borderRadius: '6px'
                }}>
                  {/* 第一行字段 */}
                  <Space size="middle" style={{ marginBottom: 12 }}>
                    <Form.Item
                      {...field}
                      name={[field.name, 'formtype']}
                      label="表单类型"
                    >
                      <Radio.Group>
                        <Radio value="button">button</Radio>
                        <Radio value="form">form</Radio>
                        <Radio value="checkbox">checkbox</Radio>
                        <Radio value="select">select</Radio>
                        <Radio value="radio">radio</Radio>
                        <Radio value="input">input</Radio>
                        <Radio value="textarea">textarea</Radio>
                      </Radio.Group>
                    </Form.Item>

                    <Form.Item
                      {...field}
                      name={[field.name, 'buttontype']}
                      label="按钮类型"
                    >
                      <Radio.Group>
                        <Radio value="prompt">prompt</Radio>
                        <Radio value="prompt_const">prompt_const</Radio>
                        <Radio value="link">link</Radio>
                        <Radio value="langGpt">langGpt</Radio>
                        <Radio value="txtop">txtop</Radio>
                      </Radio.Group>
                    </Form.Item>

                    <Form.Item
                      {...field}
                      name={[field.name, 'name']}
                      label="名称"
                    >
                      <Input placeholder="请输入名称" />
                    </Form.Item>

                    <Form.Item
                      {...field}
                      name={[field.name, 'label']}
                      label="标签"
                    >
                      <Input placeholder="请输入标签" />
                    </Form.Item>
                  </Space>

                  {/* 第二行字段 */}
                  <Form.Item
                    {...field}
                    name={[field.name, 'prompt']}
                    label="提示词"
                  >
                    <Input.TextArea 
                      placeholder="请输入提示词" 
                      rows={3}
                    />
                  </Form.Item>

                  <Button 
                    onClick={() => remove(field.name)} 
                    type="link" 
                    danger
                  >
                    删除
                  </Button>
                </div>
              ))}

              <Button 
                onClick={() => add()}
                type="dashed" 
                block
              >
                添加表单项
              </Button>
            </>
          )}
        </Form.List>
      </Form>
    </div>
  );
}